<template>
  <view>
    <view class="head-content">
      <view class="project-info">
        <view class="project-info-box">
          <view class="u-line-2 project-name">
            {{ objData.projectName }}
          </view>
          <view class="tag-box">
            <view class="tags">
              <text class="tag-item"
                >{{ objData.projectType
                }}{{
                  objData.drugRegister ? '-' + objData.drugRegister : ''
                }}</text
              >
              <text class="tag-item u-m-l-10" v-if="objData.stages">{{
                objData.stages
              }}</text>
              <text class="tag-item u-m-l-10">{{ objData.projectNo }}</text>
            </view>
            <view class="details-btn" @click="goDetails">查看详情</view>
          </view>
        </view>
      </view>
      <view class="transition-bg">
        <describeVue
          slot="body"
          :data="objData"
          :column="column"
          :empty-value="'无'"
        >
          <template #projectOrgList="{ prop, data }">
            {{ setProjectOrgList(data[prop]) || '无' }}
          </template>
          <template #projectProfessionList="{ prop, data }">
            {{ setProjectProfessionList(data[prop]) || '无' }}
          </template>
        </describeVue>
        <u-line-progress
          inactive-color="#fff"
          active-color="#2979ff"
          :percent="objData.groupRate ? objData.groupRate * 100 : 0"
          height="28"
          :show-percent="false"
        ></u-line-progress>
        <view class="progress-box">
          <text
            >入组进度：{{
              objData.groupRate
                ? Number((objData.groupRate * 100).toFixed(2))
                : 0
            }}%</text
          >
          <text class="project-status">{{
            PROJECT_STATUS_MAP[objData.projectStatus]?.label
          }}</text>
        </view>
      </view>
    </view>

    <view class="gride-box">
      <view
        v-for="item in gridList"
        :key="item.label"
        class="gride-item"
        @click="gotoclick(item.pathName)"
      >
        <view
          class="icon-box"
          :class="{ blue: item.pathName, gray: !item.pathName }"
          ><u-icon
            size="50"
            custom-prefix="custom-icon"
            :name="item.icon"
          ></u-icon
        ></view>

        <view>{{ item.label }}</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import describeVue from '@/components/describe.vue';
import { PROJECT_STATUS_MAP } from '@/pages/project/index';
import { useUserStore } from '@/stores/user';
import { onLoad } from '@dcloudio/uni-app';
import { getProjectAuth } from '@/api/modules/common';
import { getAppInfo } from '@/utils/tools';
const userStore = useUserStore();
const orgList = userStore.getAuth.map((item: any) => ({
  label: item.orgName,
  value: item.orgId,
}));

// orgList.forEach((item: any) => {
//   item.disabled = item.appList.some((el: any) => el.appCode === 'CTMS');
// });

const gridList = [
  {
    icon: 'gailan',
    label: '概况',
    pathName: 'overview',
  },
  {
    icon: 'jindu',
    label: '进度',
    pathName: 'progress',
  },
  {
    icon: 'gongzuotai',
    label: '工作',
    pathName: 'work',
  },
  {
    icon: 'chengyuanduoxuan',
    label: '成员',
    pathName: 'member',
  },
  {
    icon: 'yunyingzhongxin',
    label: '中心',
  },
  {
    icon: 'caiwuguanli',
    label: '财务',
    pathName: 'finance',
  },
  {
    icon: 'yaopin-01',
    label: '药品',
  },
  {
    icon: 'renyuan-05',
    label: '受试者',
  },
  {
    icon: 'zhikong-01',
    label: '质控',
  },
];

const column = [
  {
    label: '申办方',
    prop: 'projectOrgList',
    width: 200,
  },
  {
    label: '专业/主要研究者',
    prop: 'projectProfessionList',
    width: 300,
  },
];
const goDetails = () => {
  (uni as any).$Router.push({
    name: 'projectDetails',
    params: {
      projectId: objData.value.projectId,
    },
  });
};
// 设置专业
function setProjectProfessionList(list: any[]) {
  if (!list) {
    return '';
  }
  list = list.filter((item) => item.departmentId);
  const arr = list.map((item) => {
    const str: any[] = [];
    if (item.departmentName) {
      str.push(item.departmentName);
    }
    if (item.piName) {
      str.push(item.piName);
    }
    return str.join('/');
  });
  return arr.join('、');
}

// 设置申办方
function setProjectOrgList(list: any[]) {
  if (!list) {
    return '';
  }
  const arr = list
    .filter((item) => item.orgType === 3)
    .map((item) => item.orgName);
  return arr.join('、');
}

const gotoclick = (name?: string) => {
  if (name) {
    (uni as any).$Router.push({
      name,
      params: { params: encodeURIComponent(JSON.stringify(objData.value)) },
    });
  } else {
    uni.showToast({
      title: '开发中，敬请期待',
      icon: 'none',
      duration: 2000,
    });
  }
};

const objData = ref<any>({});
onLoad(() => {
  const { params } = (uni as any).$Router.getQuery();
  objData.value = JSON.parse(decodeURIComponent(params));
  // 获取项目的 权限
  getAuth();
});
const getAuth = async () => {
  const userInfo = userStore.getUserInfo;
  const orgInfo = userStore.getOrgInfo;
  const appInfo = (orgInfo?.appList || []).find(
    (el: any) => el.appCode === 'CTMS'
  );
  let res: any = await getProjectAuth({
    orgId: orgInfo.orgId,
    appId: getAppInfo(orgInfo.appList)?.appId,
    userId: userInfo.userId,
    projectId: objData.value.projectId,
    renewFlag: 1,
  });
  userStore.setProjectPermissions(
    res.allFunctionList.map((item: any) => item.fuceCode)
  );
};
</script>

<style lang="scss" scoped>
.head-content {
  background-color: #0177fd;
  background-size: 50% 100%;
  background-image: linear-gradient(to bottom, #0177fd 70%, #f0f1f2 0);

  .project-info {
    .project-info-box {
      padding: 0 5%;
      .project-name {
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }
      .tag-box {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tags {
          flex: 1;
        }
        .tag-item {
          background: rgba(255, 255, 255, 0.3);
          color: #fff;
          padding: 5rpx 10rpx;
          border-radius: 5rpx;
          font-size: 24rpx;
          display: inline-block;
          margin: 2rpx 0;
        }
      }
      .details-btn {
        padding: 5rpx 10rpx;
        border-radius: 10rpx;
        border: 1px solid #fff;
        color: #fff;
      }
    }
  }
}
.icon-box {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: #0177fd;
  color: #fff;
  line-height: 100rpx;
  margin-bottom: 20rpx;
}
.blue {
  background: #0177fd;
}
.gray {
  background: #ddd;
}

.transition-bg {
  width: 90%;
  margin: 0 auto;
  margin-top: 30rpx;
  border-radius: 30rpx;
  padding: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);

  .progress-box {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;

    .project-status {
      color: #0177fd;
      font-weight: bold;
    }
  }
}

.gride-box {
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
  flex-wrap: wrap;
  margin-top: 20rpx;
  .gride-item {
    width: 200rpx;
    height: 200rpx;
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 20rpx 20rpx 15rpx 5rpx rgba(204, 204, 204, 0.8);
    text-align: center;
    margin: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}
</style>
